<template>
 <div class="user-operation box-shadow">
    <div class="operation" v-for="operation in accountOperate" :key="operation.id">
      <span class="icon" :style="bg(operation.bg)">
        <icon-svg :iconClass="operation.icon"></icon-svg>
      </span>
      <span class="context">{{operation.context}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      accountOperate: [
        {
          id: 1,
          icon: '',
          context: '充值',
          icon: 'iconzijin_chongzhi',
          bg: require('@/assets/imgs/caizhong_bj_01.svg')
        },
        {
          id: 2,
          icon: '',
          context: '提现',
          icon: 'iconzijin_tixian',
          bg: require('@/assets/imgs/caizhong_bj_02.svg')
        },
        {
          id: 3,
          icon: '',
          context: '转换',
          icon: 'iconzijin_zhuanhuan',
          bg: require('@/assets/imgs/caizhong_bj_07.svg')
        }
      ],
    }
  },
  methods: {
    bg(bg) {
      return `background:url(${bg}) no-repeat center / cover`
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .user-operation 
    width 100%
    height 48px 
    display flex
    background #fff
    box-shadow 1px 0px 0px 0px rgba(208,208,208,1)
  .operation 
    width 33.33% 
    box-sizing border-box
    display flex
    align-items center
    justify-content center
    .icon 
      width 24px
      height 24px 
      display flex 
      align-items center
      justify-content center 
      font-size 22px
      border-radius 50% 
      margin-right 10px
    .context 
      color $color-theme-dark 
</style>